<template>
  <div class="g-con container">
    <div
      class="bg"
      v-bind:style="{ 'background-image': 'url(' + backgroundImage + ')' }"
    >
      <div class="head_sculpture">
        <div class="con">
          <img
            v-if="avatar"
            :src="avatar"
            class="avatar"
          />
        </div>
        <Upload
          v-if="isEdit"
          ref="uploadAvatar"
          @change="setAvatar"
        >
          <img
            src="@/assets/img/icon_tuijianfengmian.png"
            class="upload_icon"
          />
        </Upload>
      </div>
      <div style="margin-top: 200px;margin-left: 20px;">
        <h2 class="name1" style="margin-bottom: 4px;">{{ name }}</h2>
        <div class="identify1">{{ identify }}</div>
      </div>

      <div
        v-if="isEdit"
        class="choose_bg"
        @click="centerDialogVisible = true"
      >
        <img
          src="@/assets/img/icon_tuijianfengmian.png"
          alt=""
        />
      </div>
      <div
        v-if="isEdit"
        class="upload_bg"
      >
        <Upload
          ref="uploadBg"
          @change="setBg"
        >
          <img
            src="@/assets/img/icon_shangchuanfengmian.png"
            alt=""
          />
        </Upload>
      </div>
    </div>
    <el-dialog
      v-if="centerDialogVisible"
      v-model="centerDialogVisible"
      :append-to-body="true"
      width="1000px"
      class="dialog-class"
      :show-close="false"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4
            :id="titleId"
            :class="titleClass"
          >
            {{ t('organizationStructure.bgtit') }}
          </h4>
          <img
            src="@/assets/img/icon_guanbi.png"
            @click="close"
            class="close"
          />
        </div>
      </template>
      <div class="img-list">
        <p
          v-for="item in ImgList"
          :key="item"
          class="item"
          :class="{ active: item == active }"
          @click="active = item"
        >
          <img
            :src="item"
            alt=""
          />
        </p>
      </div>
      <template #footer>
        <div class="dialog-footer flexcc">
          <el-button
            color="#252628"
            plain
            @click="handleClose"
          >
            {{ t('cancelText') }}
          </el-button>
          <el-button
            type="primary"
            color="#252628"
            @click="changeBgFn"
            >{{ t('confirmText') }}</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { computed, onBeforeMount, onMounted, ref, watch } from 'vue'
import { BasicBackgroundImage, getOrganization, changeEnterprise } from '@/service/organizationStructure'
import { getCustomerInfoById, editCustomerInfo } from '@/service/personalInformation'
import { useI18n } from 'vue-i18n'
import useLogin from '@/stores/login'
import Upload from '@/components/Upload.vue'

const { t, locale } = useI18n()
watch(locale, () => {
  init()
})

onBeforeMount(() => {
  init()
})

const storeLogin = useLogin()
const { setUserInfoKey } = storeLogin

const props = defineProps({
  pageType: {
    type: String,
    required: true
  }
})

const avatar = ref('')
const name = ref('')
const identify = ref('')
const backgroundImage = ref('')

const isEdit = computed(() => {
  if (props.pageType === '2') {
    return storeLogin?.userInfo?.isAdmin === '1'
  }
  return true
})

// 用户信息
const getCustomerInfoByIdFn = () => {
  getCustomerInfoById(JSON.parse(localStorage.getItem('login')).userInfo.id).then(({ data }) => {
    const { avatar: a, userName, backgroundImage: b } = data
    avatar.value = a
    name.value = userName
    backgroundImage.value = b
  })
}

// 企业信息
const getEnterpriseInfoFn = () => {
  let id = storeLogin.userInfo.enterpriseId
  getOrganization(id).then(({ data }) => {
    const { enterpriseLogo, enterpriseName, backgroundImage: b } = data
    avatar.value = enterpriseLogo
    name.value = enterpriseName
    identify.value = data.identity
    backgroundImage.value = b
  })
}

const getInfo = () => {
  if (props.pageType === '1') {
    getCustomerInfoByIdFn()
  }
  if (props.pageType === '2') {
    getEnterpriseInfoFn()
  }
}

// 头像
const setAvatar = (val) => {
  if (props.pageType === '1') {
    editCustomerInfo({
      avatar: val,
      id: storeLogin.userInfo.id
    }).then(() => {
      getInfo()
      setUserInfoKey('avatar', val)
    })
  }

  if (props.pageType === '2') {
    changeEnterprise({
      enterpriseLogo: val,
      id: storeLogin.userInfo.enterpriseId
    }).then(() => {
      getInfo()
    })
  }
}

// 封面
const setBg = (val) => {
  if (props.pageType === '1') {
    editCustomerInfo({
      backgroundImage: val,
      id: storeLogin.userInfo.id
    }).then(() => {
      getInfo()
    })
  }

  if (props.pageType === '2') {
    changeEnterprise({
      backgroundImage: val,
      id: storeLogin.userInfo.enterpriseId
    }).then(() => {
      getInfo()
    })
  }
}

//修改封面
const changeBgFn = () => {
  if (props.pageType === '1') {
    editCustomerInfo({
      backgroundImage: active.value,
      id: storeLogin.userInfo.id
    }).then(() => {
      centerDialogVisible.value = false
      getInfo()
    })
  }

  // 企业
  if (props.pageType === '2') {
    changeEnterprise({
      backgroundImage: active.value,
      id: storeLogin.userInfo.enterpriseId
    }).then(({ msg }) => {
      centerDialogVisible.value = false
      getInfo()
    })
  }
}

// 固定背景图
const active = ref('')
const ImgList = ref([])
const getBgList = () => {
  BasicBackgroundImage().then((res) => {
    ImgList.value = res.data
  })
}
const centerDialogVisible = ref(false)
const handleClose = () => {
  centerDialogVisible.value = false
  active.value = ''
}

//
const init = () => {
  getBgList()
  getInfo()
}
</script>
<style scoped lang="scss">
.container {
  height: 275px;

  .bg {
    width: 100%;
    height: 180px;
    display: flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    background-color: #f9f9f9;
  }

  .choose_bg,
  .upload_bg {
    width: 40px;
    height: 40px;
    // background: #CA2A02;
    // border-radius: 50%;
    cursor: pointer;
    top: 120px;
    position: absolute;
  }

  .choose_bg {
    right: 70px;
    cursor: pointer;
  }

  .upload_bg {
    right: 20px;
  }

  .head_sculpture {
    width: 162px;
    height: 162px;
    margin-top: 81px;
    margin-left: 25px;
    position: relative;
    .con {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #f2f2f2;
      overflow: hidden;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        &.avatar {
          width: 100%;
          height: 100%;
        }
        &.upload {
          cursor: pointer;
          z-index: 2;
        }
      }
    }

    .upload_icon {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0%);
      bottom: -20px;
    }
  }

  .name, .identify {
    margin-left: 20px;
    margin-top: 200px;
  }
  .identify{
    margin-left: 0px;
    margin-top: 220px;
  }
}

.img-list {
  width: 100%;
  max-height: 810px;
  overflow-y: auto;
  padding-top: 20px;

  .item {
    width: 100%;
    height: 134px;
    border: 2px dashed #ccc;
    margin-bottom: 21px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .active {
    border: 2px dashed red;
  }
}
</style>
